<template>
    <div class="zjb_home">
       <!-- 首页布局开始 -->
       <div class="zjb_con">
            <!-- 内容布局开始 -->
            <div class="zjb_header">
            <!-- 头部布局开始 -->
                <div class="zjb_banner" >
                    <!-- 轮播图布局开始 -->
                    <van-swipe :autoplay="3000">
                   
                      <van-swipe-item v-for="(v,i) in banner" :key="i"><img :src="v.banner_img" alt=""></van-swipe-item>
                     
                    </van-swipe>
                    <!-- 轮播图布局结束 -->
                </div>
                <div class="zjb_banner_bottom">
                    <!-- 轮播图下的导航布局开始 -->
                    <ul>
                        <router-link tag="li" to="/course">
                            <img src="" alt="">
                            <p>特色课</p>
                        </router-link>
                        <li @click="dd()">
                            <img src="" alt="">
                            <p>一对一辅导</p>
                        </li>
                        <router-link tag="li" to="ri">
                            <img src="" alt="">
                            <p>学习日历</p>
                        </router-link>
                    </ul>
                    <!-- 轮播图下的导航布局结束 -->
                </div>
            <!-- 头部布局结束 -->
            </div>

            <div class="zjb_con_home">
                <!-- 名师内容布局开始 -->
                <p>{{homeAll[0].channel_info.name}}</p>
                <ul>
                    <li v-for="(v,i) in homeAll[0].list" :key="i" @click="aa(v)">
                       <img :src="v.teacher_avatar" alt="">
                        <div class="zjb_right">
                            <div>
                                <p>{{v.teacher_name}}</p>
                                <!-- <p>{{v.}}</p> -->
                            </div>
                            <p>{{v.introduction}}</p>
                            
                        </div>
                    </li>
                </ul>
                 <p>{{homeAll[2].channel_info.name}}</p>
                <ul>
                    <router-link tag="li" :to="'/tearch?id='+v.teacher_id" v-for="(v,i) in  homeAll[2].list" :key="i" >
                       <img :src="v.teacher_avatar" alt="">
                        <div class="zjb_right">
                            <div>
                                <p>{{v.teacher_name}}</p>
                                <p>{{v.level_name}}</p>
                            </div>
                            <p>{{v.introduction}}</p>
                        </div>
                    </router-link>
                </ul>
                <!-- 名师内容

布局结束 -->
            </div>
            <!-- 内容布局结束 -->
       </div>


       <!-- 首页布局结束 -->
    </div>
</template>

<script>
import { Dialog } from 'vant';
import http1 from '../../uti/http';
import http from '../../http/http'
import axios from "axios";//==引入axios模块
    export default {
        name: "Home",
        beforeRouteLeave(to,from,next){
            if(to.name=='tearch'){
                from.meta.keepAlive=true;
            }else{
                from.meta.keepAlive=false;
                to.meta.keepAlive=false;
            }
            next();
        },
         data() {
            return {
              homeAll:[],
              banner:[]
            }
        },
        beforeRouteLeave(to,from,next){
           if(to.name=='course'){
                from.meta.keepAlive=true;//-->如果去往course页面，让home的meta中的keepalive为true
           }else{//-->否则home本身的keepalive为false，去往其他页面的keepalive为false
               from.meta.keepAlive=false;
               to.meta.keepAlive=false;
           }
           next();//-->往下执行
        },
        mounted(){

            //-->读取json数据，并渲染到页面上
           let  _this=this;
           var token=this.$store.state.User.token;
           this.$http1.get('/api/app/recommend/appIndex?',{ headers: { Authorization: "Bearer " + token }}).then(ret=>{
                _this.homeAll=ret;
           })
        //    var show=http('get','https://www.365msmk.com/api/app/recommend/appIndex?',{ headers: { Authorization: "Bearer " + token }})
        //     show.then(ret=>{
        //         console.log(ret.data.data)
        //         _this.homeAll=ret.data.data;
                
        //     });
            //--->读取轮播图接口
            this.$http1.get('/api/app/banner?',{ headers: { DeviceType:'H5',Authorization: "Bearer " + token }}).then(ret=>{
                 this.banner=ret;
            })
            // this.axios.get('https://www.365msmk.com/api/app/banner?',{ headers: { DeviceType:'H5',Authorization: "Bearer " + token }}).then(res=>{
            //     console.log(res.data.data);
            //      this.banner=res.data.data;
            // })

        },
        methods:{
            aa(v){//--->点击，没有token，就去登录，有的话跳转
            var token=localStorage.getItem('login');
            if(token){
                this.$router.push({path:'/tearch',query:{id:v.teacher_id}});
            }else{
                Dialog.confirm({
  title: '赶紧登录一下吧',
  message: '点击登录，解锁更多的新姿势哟！'
}).then(() => {
  // on confirm
  this.$router.push('/login');
}).catch(() => {
  // on cancel
});
            }
                

            },
            dd(){
                this.$router.push({path:"/oto"})
            }
        }
    }
</script>

<style scoped lang="scss">
>>>.van-button{
    margin-left: 0;
}
.zjb_home{
    width: 6.4rem;
    height: 100%;
    background: #f0f2f5;
    display: flex;
    flex-direction: column;
}
.zjb_con{
    flex: 1;
    overflow: auto;
}
.zjb_header{
    width:6.4rem;
    height: 5.16rem;
    position: relative;
    .zjb_banner{
        img{
        width:6.4rem;
        height:3.41rem;
         }
    }
}
.zjb_banner_bottom{
    width: 6.4rem;
    height: 1.75rem;
    position: absolute;
    bottom: .4rem;
    ul{
        display: flex;
        justify-content: space-around;
        padding: 0 .17rem;
        li{
            width: 1.75rem;
            height: 1.75rem;
            background: #fff;
            // border: 1px solid #000;
            text-align: center;
            border-radius: .2rem;
            &>img{
                width: 0.35rem;
                height: 0.34rem;
                display: block;
                margin: .4rem auto;
            }
            &>p{
                font-size: .2rem;
                color: #8c8c8c;
                font-weight: 400;
                margin-top: .25rem;
            }
        }
    }
}
.zjb_con_home{
    width:6rem;
    height: auto;
    padding: .2rem .17rem;
    overflow: hidden;
    &>p{
        font-size: .27rem;
        border-left: 4px solid red;
        padding-left: .2rem;
        color: #595959;
        height: .34rem;
        line-height: .34rem;
    }
    ul{
          width: 100%;
          margin-bottom: .2rem;
        li{
            height: 1.38rem;
            margin-top: .17rem;
            padding: 0 .25rem;
            background: #fff;
            border-radius: .16rem;
            display: flex;
            align-items: center;
            &>img{
                width: .68rem;
                height: .68rem;
            }
            &>.zjb_right{
                width: 4.58rem;
                height: .8rem;
                // border: 1px solid #000;
                margin-left: .2rem;
                
               &>div{
                   display: flex;
                   margin-top: .1rem;
                   &>p:nth-child(1){
                       font-size: .25rem;
                   }
                  &>p:nth-child(2){
                       font-size: .18rem;
                       color: #ea7a2f;
                       margin-left: .1rem;
                   }
               }
                &>p{
                    font-size: .2rem;
                    color: #b7b7b7;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-top: .2rem;
                }
            }
        }
    }
}
    
</style>
